<script setup>
  import { onMounted, ref } from 'vue'
  import { useRoute } from 'vue-router'
  import PageHeader from "@/components/PageHeader.vue";
  import GoodsItem from "@/components/GoodsItem.vue";
  import {collectApi, collectListApi} from "@/api/index.js";
  import {message} from "ant-design-vue";
  const route = useRoute();
  const type = ref(2)
  const goodsList = ref([])
  const change = () => {
    getGoodsList()
  }
  const getGoodsList = () => {
    collectListApi({type: type.value}).then((res) => {
      goodsList.value = res.data
    })
  }
  const sc = (i) => {
    goodsList.value.splice(i, 1)
  }
  const cancelShop = (id, index) =>{
    collectApi({type: 1, id}).then(() =>{
      goodsList.value.splice(index, 1)
      message.success('操作成功')
    }).catch(err => message.error(err.msg))
  }
  onMounted(() => {
    type.value = route.query.type
    getGoodsList()
  })
</script>

<template>
  <div class="collect-page">
    <PageHeader>
      <a-radio-group v-model:value="type" button-style="solid" size="small" @change="change">
        <a-radio-button value="1"> 店铺 </a-radio-button>
        <a-radio-button value="2"> 商品 </a-radio-button>
      </a-radio-group>
    </PageHeader>

    <div class="goods-list" v-if="type === '2'">
      <GoodsItem v-for="(item, index) in goodsList" :key="item" :info="item" @collect="sc(index)"/>
    </div>
    <div class="shop-l" v-else>
      <div class="shop" v-for="(item, index) in goodsList" :key="item">
        <img :src="item.img" alt="" class="logo">
        <div class="shop-info">
          <div class="shop-name"> {{ item.name }} </div>
          <div class="shop-label">
            <a-tag v-for="tag in item.label" :key="tag"> {{ tag }} </a-tag>
          </div>
        </div>
        <div class="close" @click="cancelShop(item.id, index)">
          <i class="fa-solid fa-trash-can"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.collect-page {
  padding: 40px 0;
  :deep(.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)) {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
  }
  .shop-l {
    gap: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    .shop {
      gap: 10px;
      display: flex;
      align-items: center;
      position: relative;
      padding: 20px 12px;
      border-radius: 10px;
      box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
      .logo {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }
      .shop-info {
        gap: 10px;
        display: flex;
        flex-direction: column;
      }
      .close {
        position: absolute;
        top: 12px;
        right: 12px;
        color: #f40;
        cursor: pointer;
      }
    }
  }
}

@media (max-width: 750px) {
  .shop-l {
    display: block !important;
  }
}
</style>